<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/iCheck/custom.css}" rel="stylesheet"/>
<link href="/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css"
      th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-user-add">

			<div class="form-group">
				<label class="col-sm-3 control-label">用户姓名：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="name" id="userName">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">登录名：</label>
				<div class="col-sm-8">
					<input class="form-control" value="" type="text" name="loginName" id="loginName">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">密码：</label>
				<div class="col-sm-8">
					<input class="form-control" value="123456" type="password" name="pwd" id="password">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">邮箱：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="email" id="email">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">手机：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="tel" id="phonenumber">
				</div>
			</div>
            <div class="form-group">
                <label class="col-sm-3 control-label">年龄：</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="age" id="age">
                </div>
            </div>
			<div class="form-group">
				<label class="col-sm-3 control-label">性别：</label>
				<div class="col-sm-8">
					<select id="sex" class="form-control m-b">
						<option value=""> - - </option>
	                    <option th:text="男" th:value="男"></option>
	                    <option th:text="女" th:value="女"></option>
	                </select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
					<div class="onoffswitch">
                         <input type="checkbox" th:checked="true" class="onoffswitch-checkbox" id="status" name="status">
                         <label class="onoffswitch-label" for="status">
                             <span class="onoffswitch-inner"></span>
                             <span class="onoffswitch-switch"></span>
                         </label>
                     </div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">部门名称：</label>
				<div class="col-sm-8">
					<input name="dept" id="dept" hidden="hidden">
					<input class="form-control" type="text" name="dept" readonly="true" id="treeName">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">岗位：</label>
				<div class="col-sm-8">
					<select id="post" name="position" class="form-control select2-hidden-accessible">
						<option value=""> - - </option>
						<option th:each="post:${positions}" th:value="${post.positionId}" th:text="${post.positionName}"></option>
					</select>
				</div>
			</div>


			<div class="form-group">
				<label class="col-sm-3 control-label">爱好：</label>
				<div class="col-sm-8">
					<textarea name="hobby" class="form-control" rows="5" cols="70" th:value="*{hobby}" th:text="*{hobby}"></textarea>
				</div>
			</div>

			<div class="form-group">
				<label class="col-sm-3 control-label">个人介绍：</label>
				<div class="col-sm-8">
					<textarea rows="10" cols="70" name="self_introduction" class="form-control" th:value="*{self_introduction}" th:text="*{self_introduction}"></textarea>
				</div>
			</div>



			<div class="form-group">
				<label class="col-sm-3 control-label">角色：</label>
				<div class="col-sm-8">
					<label th:each="role:${roles}" class="checkbox-inline i-checks">
						<input name="role_ID" type="radio" th:value="${role.roleId}" th:text="${role.roleName}" th:checked="true">
					</label>
				</div>
			</div>

			<div class="form-group">
				<div class="form-control-static col-sm-offset-9">
					<button type="submit" class="btn btn-primary">提交</button>
					<button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
				</div>
			</div>
		</form>
	</div>
    <div id="treeDept" style="width: 200px;height: 300px ;text-align: center;display: none">
        <ul id="tree" class="ztree"></ul>
    </div>
	<div th:include="include::footer"></div>
	<script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
	<script th:src="@{/ajax/libs/select/select2.js}"></script>
    <script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
    <script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
	<script>
        $("#form-user-add").validate({
        	rules:{
                dept:{
        			required:true,
        		},
                loginName:{
                    required:true,
                    minlength: 5,
                    maxlength: 10
				},
        		pwd:{
        			required:true,
        			minlength: 5,
        			maxlength: 20
        		},
                position:{
                    required:true,
                },
                role_ID:{
                    required:true,
                },
                age:{
                    required:false,
                },
        		email:{
        			required:false,
                    email:true,
                    remote: {
                        url: "/user/checkEmailUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            name: function () {
                                return $.trim($("#email").val());
                            }
                        },
                        dataFilter: function (data, type) {
                            if (data == "0") return true;
                            else return false;
                        }
                    }
        		},
                loginName:{
                    required:true,
                    remote: {
                        url: "/user/checkLoginNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            name: function () {
                                return $.trim($("#loginName").val());
                            }
                        },
                        dataFilter: function (data, type) {
                            if (data == "0") return true;
                            else return false;
                        }
                    }
                },
        		tel:{
        			required:false,
        			isPhone:true,
                    remote: {
                        url: "/user/checkPhoneUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                            name: function () {
                                return $.trim($("#phonenumber").val());
                            }
                        },
                        dataFilter: function (data, type) {
                            if (data == "0") return true;
                            else return false;
                        }
                    }
        		},
        	},
        	messages: {
        		"email": {
                    remote: "Email已经存在"
                },
        		"tel":{
                	remote: "手机号码已经存在"
        		}
            },
			hobby:{
                maxlength:100,
			},
            self_introduction:{
                maxlength:150,
			},
        	submitHandler:function(form){
        		btn.add();
        	}
        });

        var index;
        $("#treeName").click(function () {
            btn.selectDeptTree();
        })

        var btn={
            add:function () {
                var deptId = $("input[name='dept']").val();
                var userName = $("input[name='name']").val();
                var password = $("input[name='pwd']").val();
                var age = $("input[name='age']").val();
                var email = $("input[name='email']").val();
                var loginName = $("input[name='loginName']").val();
                var phonenumber = $("input[name='tel']").val();
                var sex = $("#sex option:selected").val();
                var status = $("input[name='status']").is(':checked') == true ? 0 : 1;
                var postIds = $.form.selectSelects("post");
                var hobby = $("textarea[name='hobby']").val();
                var roleId = $.form.selectRadioCheckeds("role_ID");
                var self_introduction = $("textarea[name='self_introduction']").val();
                $.ajax({
                    cache : true,
                    type : "POST",
                    url :  "/user/addSave",
                    data : {
                        "dept": deptId,
                        "name": userName,
                        "pwd": password,
                        "email": email,
                        "age":age,
                        "tel": phonenumber,
                        "sex": sex,
                        "status": status,
                        "role_ID": roleId,
                        "position": postIds,
                        "hobby":hobby,
						"loginName":loginName,
                        "self_introduction":self_introduction
                    },
                    async : false,
                    error : function(request) {
                        $.modal.alertError("系统错误");
                    },
                    success : function(data) {
                        //alert(JSON.stringify(data))
                        $.operate.saveSuccess(data);
                    }
                });
            },
            selectDeptTree:function () {
                btn.treeDept();
                index=layer.open({
                    type:1,
                    area:['200px','auto'],
                    shade: 0.3,
                    title: "选择部门",
                    content: $("#treeDept")
                })
            },
            treeDept:function  () {
                var zTreeObj,
                    setting = {
                        view: {
                            selectedMulti: false
                        },
                        callback: {
                            onClick: btn.zTreeOnClick
                        }

                    },
                    zTreeNodes = [
                        {
                            "name": "部门管理", open: true, children: initDeptData()
                        }
                    ];

                function initDeptData() {
                    var arr = new Array();
                    $.ajaxSettings.async = false;
                    $.post("/dept/ajaxlist", {}, function (data) {
                        for (var i = 0; i < data.length; i++) {
                            var treeData = {
                                "name": data[i].deptName,
                                "value": data[i].depId
                            }
                            arr.push(treeData);
                        }
                    })
                    return arr;
                }
                zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
            },
            zTreeOnClick:function (event,treeId,treeNode) {
                $("#treeName").val(treeNode.name);
                $("#dept").val(treeNode.value);
                layer.close(index);
            }
        }

    </script>


</body>
</html>
